import React from 'react';
import { connect } from 'dva';
import { List, Button, Grid } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import styles from './VipHomePage.css';
import MyIcon from '../components/Base/MyIcon';


const Item = List.Item;

const data = [
  {
    name: '个人资料',
    href: '/vipInfo',
  },
  {
    name: '修改密码',
    href: '/resetPassword',
  },
  {
    name: '消费记录',
    href: '/vipLog',
  },
  {
    name: '优惠券',
    href: '/vipDiscount',
  },
  {
    name: '在线咨询',
    href: '/',
  },
  {
    name: '我的消息',
    href: '/vipMessage',
  },
  {
    name: '退出登录',
    href: '/nav',
  },
];

class P extends React.Component {
  render() {
    const { dispatch } = this.props;
    return (
      <Container title="会员中心">
        <List
          renderHeader={() => {
            return (
              <div className={styles.avatar_wrap}>
                <MyIcon type="avatar" className={styles.avatar} />
                <div className={styles.avatar_name}>
                  <span>会员名字</span>
                  <span>当前积分：<strong>100</strong></span>
                </div>

              </div>
            );
          }}
        >
          <Item>
            <Grid
              data={data} columnNum={2} hasLine={false}
              renderItem={(dataItem, index) => (
                <Button className={styles.button}>
                  {dataItem.name}
                </Button>
              )}
              onClick={(item) => {
                dispatch(routerRedux.push({
                  pathname: item.href,
                }));
              }}
            />
          </Item>
        </List>
      </Container>
    );
  }
}
export default connect()(P);
